<template>
  <div class="container">
    <h1>编辑维修记录</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>维修信息</span>
    <div class="body">
      <div class="input">
        <div class="input-left">
          <span>设备名称</span>
        </div>
        <div class="input-right">
          <el-input v-model="repairForm.name" placeholder="请输入设备名称" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>设备编号</span>
        </div>
        <div class="input-right">
          <el-input v-model="repairForm.fixNum" placeholder="请输入设备编号" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>品牌型号</span>
        </div>
        <div class="input-right">
          <el-input v-model="repairForm.style" placeholder="请输入品牌型号" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>维修人员</span>
        </div>
        <div class="input-right">
          <el-input v-model="repairForm.fixer" placeholder="请输入维修人员" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>故障描述</span>
        </div>
        <div class="input-right">
          <el-input
            type="textarea"
            v-model="repairForm.reason"
            placeholder="请输入故障描述"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>维修结果</span>
        </div>
        <div class="input-right">
          <el-select v-model="repairForm.result" placeholder="请选择维修结果">
            <el-option label="完成" :value="1" />
            <el-option label="未完成" :value="0" />
          </el-select>
        </div>
      </div>
      <div style="margin: 2rem 0 2rem 12rem">
        <el-button type="primary" @click="addOrUpdate">提交</el-button>
        <el-button type="default" @click="goBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const id = route.query.id;

const repairForm = ref({
  name: "",
  fixNum: "",
  style: "",
  fixer: "",
  reason: "",
  result: null,
});

// 提交或更新维修记录
const addOrUpdate = () => {
  // if (!id) {
  //   ElMessage({ message: "ID丢失，无法更新", type: "error" });
  //   return;
  // }
  let config = {};
  if (id) {
    config = {
      method: "POST",
      url: `http://localhost:8080/DeviceFix/updateDeviceFix?id=${id}`,
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        ...repairForm.value,
      },
    };
  } else {
    config = {
      method: "POST",
      url: `http://localhost:8080/DeviceFix/save`,
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        ...repairForm.value,
      },
    };
  }

  axios(config)
    .then((response) => {
      if (response.data.code === 1) {
        ElMessage({
          message: "操作成功",
          type: "success",
        });
      } else {
        ElMessage({
          message: response.data.message || "操作失败",
          type: "error",
        });
      }
    })
    .catch((error) => {
      console.error(error);
      ElMessage({
        message: "操作失败",
        type: "error",
      });
    });
};

// 获取维修记录
const getRepairData = () => {
  if (!id) return; // 如果没有 id，则不执行获取操作
  axios
    .get(`http://localhost:8080/DeviceFix/${id}`, {
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
    .then((response) => {
      if (response.data) {
        Object.assign(repairForm.value, response.data.data);
      } else {
        ElMessage({
          message: "数据为空",
          type: "warning",
        });
      }
    })
    .catch((error) => {
      console.error(error);
      ElMessage({
        message: "获取数据失败",
        type: "error",
      });
    });
};

// 处理返回
const goBack = () => {
  router.push("/backend/equipment/repair");
};

onMounted(() => {
  getRepairData(); // 组件加载时获取数据
});
</script>

<style scoped>
.container {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin: 1rem 2rem 1rem 0;
  line-height: 24px;
  width: 100px;
  text-align: right;
}

.body {
  display: grid;
  justify-content: center;
  align-items: center;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.input-right {
  width: 300px;
}
</style>
